<template>
	<view>
		<view class='news acea-row'>
			<!-- ../../../static/images/news.png -->
			<view class='pictrue'>
				<image src='https://yi.qj361.com/20210818221257_new.png'></image>
			</view>
			<view class='swiperTxt' v-if="noticeData.length != 0">
				<swiper :indicator-dots="indicatorDots" :autoplay="autoplay" interval="2500" :duration="duration"
					vertical="true" circular="true">
					<block v-for="(item,index) in itemNew" :key='index'>
						<swiper-item catchtouchmove='catchTouchMove'>
								<navigator :url='item.link' class='acea-row  row-between-wrapper' hover-class='none'>
								<view class='text acea-row  row-between-wrapper'>
									<view class='newsTitle line1' style="text-align:left">
										{{item.news}}
									</view>
								</view>
								<view class='iconfont icon-xiangyou'></view>
							</navigator>
						</swiper-item>
					</block>
				</swiper>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'News',
		props: {
			noticeData: {
				type: Array,
				default: () => {}
			},
		},
		data() {
			return {
				indicatorDots: false,
				autoplay: true,
				duration: 500,
				itemNew: this.noticeData,
			};
		},
		created() {
			
		},
		mounted() {},
		methods: {},
		watch:{
			noticeData(val){
				this.itemNew = val
			}
		}
	}
</script>

<style lang="scss">
	.news {
		display: flex;
		align-items: center;
		flex-wrap: nowrap;
		height: 77rpx;
		// border-top: 1rpx solid #f4f4f4; 
		padding: 0 0 0 48rpx!important;
		// box-shadow: 0 10rpx 30rpx #f5f5f5;
		background:#F8F7FC!important;
		box-shadow: none!important;
		border-top:none!important; 
	}

	.news .pictrue {
		width: 68rpx!important;
		height: 34rpx!important;
		border-right: none!important;
		padding-right: 12rpx;
		box-sizing: content-box;
		margin-right:0!important;
	}

	.news .pictrue image {
		width: 100%;
		height: 100%;
	}

	.news .swiperTxt {
		width: 566rpx;
		height: 100%;
		line-height: 77rpx;
		overflow: hidden;
	}

	.news .swiperTxt .text {
		width: 520rpx;
	}

	.news .swiperTxt .text .label {
		font-size: 20rpx;
		color: #ff4c48;
		width: 64rpx;
		height: 30rpx;
		border-radius: 40rpx;
		text-align: center;
		line-height: 28rpx;
		border: 2rpx solid #ff4947;
	}

	.news .swiperTxt .text .newsTitle {
		width: 480rpx;
		font-size: 24rpx;
		color: #666;
	}

	.news .swiperTxt .iconfont {
		font-size: 28rpx;
		color: #888;
	}

	.news .swiperTxt swiper {
		height: 100%;
	}
</style>
